<template>
  <div class="person-box">
    <div class="info-card">
      <img src="@/assets/home/shopuser.jpeg" alt="" />
      <div class="view" @click="router.push({ path: '/store/detail' })">
        查看详情
      </div>
      <div class="name">{{ dlsUserInfo.nickname }}</div>
      <div class="phone">{{ dlsUserInfo.phone }}</div>
      <div class="info-list">
        <div>
          <div class="num">{{ statisticsMsg.shopNum }}</div>
          <div class="title">门店数</div>
        </div>
        <div>
          <div class="num">{{ statisticsMsg.staffNum }}</div>
          <div class="title">员工数</div>
        </div>
        <div>
          <div class="num">{{ statisticsMsg.todayShampooNum }}</div>
          <div class="title">今日洗发</div>
        </div>
      </div>
    </div>
    <!-- <div class="msg-list">
      <div>员工账号管理</div>
      <div>店铺信息</div>
      <div>意见反馈</div>
    </div> -->
    <div class="store-list" v-if="storeList?.length">
      <div
        class="store-name"
        :class="selectStoreId == item.id && 'selected'"
        v-for="(item, index) in storeList"
        @click="changeStore(item.id)"
        :key="item.id || index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="card store-card d-flex" v-if="selectStore">
      <div class="card-title">门店信息</div>
      <div class="d-flex flex-column j-sb py-10">
        <div class="d-flex a-center mb-16">
          <span class="label">门店全称</span>
          <span class="val">{{ selectStore.name }}</span>
        </div>
        <div class="d-flex a-center mb-16">
          <span class="label">今日洗发</span>
          <span class="val">{{ selectStore.todayShampooNum }}</span>
        </div>
        <div class="d-flex a-center mb-16">
          <span class="label">门店地址</span>
          <span class="val flex-1">{{
            `${getArea(selectStore)}${selectStore.address}`
          }}</span>
        </div>
        <div class="d-flex a-center mb-16">
          <span class="label">门店员工</span>
          <span class="val">{{ selectStore.staffNum }}人</span>
        </div>
        <div class="d-flex a-center" v-if="dlsUserInfo.roleType == 0">
          <span
            class="label"
            @click="
              router.push({
                path: '/staff/add',
                query: { storeName: selectStore.name },
              })
            "
            >新增员工</span
          >
        </div>
      </div>
    </div>
    <div class="card staff-card d-flex" v-if="staffList?.length">
      <div class="card-title">员工信息</div>
      <div class="staff-list">
        <div
          v-for="item in staffList"
          :key="item.id || index"
          class="staff-item"
        >
          <van-icon
            name="delete-o"
            class="del-icon"
            @click="deleteStaff(item)"
          />
          <div>角色: {{ item.roleType == 0 ? "管理员" : "员工" }}</div>
          <div>姓名: {{ item.realName }}</div>
          <div>账号: {{ item.username }}</div>
          <div>密码: ********</div>
        </div>
      </div>
    </div>

    <div class="btn" @click="logout">退出登录</div>
  </div>
</template>

<script setup>
import {
  postMpShopUserList,
  postMpShopUserDelete,
  postMpUserInfo,
  postMpShopList,
  postMpShopSwitch,
} from "@/api";
import { useStoreUser } from "@/store";
import { Notify, Dialog } from "vant";
import { onMounted } from "vue";
const router = useRouter();
const storeUser = useStoreUser();
const selectStoreId = ref(0);
const storeList = ref([]);
const staffList = ref([]);
const changeStore = (val) => {
  selectStoreId.value = val;
  postMpShopSwitch({
    id: selectStoreId.value,
  }).then((res) => {
    getStaffList();
    getUserInfo();
  });
};

const selectStore = computed(() => {
  return storeList.value.find((item) => item.id == selectStoreId.value) || null;
});
const dlsUserInfo = computed(() => {
  return storeUser.dlsUserInfo;
});

onMounted(() => {
  getMsg();
});
const statisticsMsg = ref({});

function getArea(item) {
  console.log("item", item);
  const obj = {
    0: "province",
    1: "city",
    2: "area",
  };
  let arr = [];
  for (let key in obj) {
    if (item[obj[key]]) {
      arr.push(item[obj[key]]);
    }
  }
  return arr.join("");
}
function getMsg() {
  postMpShopList().then((res) => {
    console.log("res.data", res.data);
    storeList.value = res.data;
    // selectStoreId.value = res.data[0].id;
  });
  getUserInfo();
  getStaffList();
}
// 获取用户信息
function getUserInfo() {
  postMpUserInfo().then((res) => {
    console.log(res);
    storeUser.dlsUserInfo = res.data;
    statisticsMsg.value = res.data.shopUserStatistics;
    selectStoreId.value = res.data.shopId;
  });
}
// 获取员工列表
function getStaffList() {
  postMpShopUserList().then((res) => {
    staffList.value = res.data;
  });
}
function deleteStaff(item) {
  Dialog.confirm({
    title: "确认",
    message: "确认删除员工？",
  })
    .then(() => {
      postMpShopUserDelete({ id: item.id }).then((res) => {
        Notify({ type: "success", message: "删除成功" });
        postMpShopUserList().then((res1) => {
          staffList.value = res1.data;
        });
      });
    })
    .catch(() => {
      // on cancel
    });
}
function logout() {
  storeUser.logout();
}
</script>

<style lang="less" scoped>
.person-box {
  padding: 0 30px 40px;
}
.info-card {
  background: #fff;
  // height: 320px;
  margin-top: 90px;
  border-radius: 15px;
  padding: 80px 0 20px;
  position: relative;
  margin-bottom: 25px;
  .view {
    font-size: 24px;
    color: #df67a9;
    position: absolute;
    top: 15px;
    right: 15px;
  }
  img {
    width: 140px;
    height: 140px;
    // background: #eee;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
  }
  .name {
    font-size: 34px;
    text-align: center;
    margin-bottom: 8px;
    color: #656565;
  }
  .phone {
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
    color: #656565;
  }

  .info-list {
    display: flex;
    justify-content: space-between;
    // margin: 0 40px;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }
    .num {
      font-size: 34px;
      margin-bottom: 10px;
      color: #545454;
    }
    .title {
      padding: 5px 20px;
      border-radius: 24px;
      font-size: 24px;
      color: #5e5b43;
      background: #fddd0d;
    }
  }
}
.msg-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  > div {
    width: 500px;
    height: 60px;
    line-height: 60px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    font-size: 32px;
  }
}
.store-list {
  white-space: nowrap;
  overflow-x: auto;
}
.store-name {
  display: inline-block;
  font-size: 32px;
  padding: 0 25px;
  letter-spacing: 3px;
  width: max-content;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 15px 15px 0 0;
  color: #fabd17;
  border: 1px solid #fabd17;
  background: #fff;
  &.selected {
    background: #fabd17;
    color: #fff;
  }
}
.card {
  border: 13px solid #fabd17;
  border-radius: 10px;
  width: 100%;
  padding: 18px;
  position: relative;
  // &::before {
  //   content: "";
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;
  //   top: 0;
  //   left: 0;
  //   border: 1px solid #fff;
  //   border-radius: 1px;
  // }
}
.store-card {
  border-top-left-radius: 0;
  margin-bottom: 20px;
  .label {
    padding: 10px;
    background: #fddd0d;
    font-size: 24px;
    border-radius: 12px;
    margin-right: 16px;
  }
  .val {
    font-size: 28px;
  }
}
.card-title {
  writing-mode: vertical-rl;
  margin-right: 20px;
  padding: 20px 30px;
  letter-spacing: 10px;
  font-size: 32px;
  background: #fbb319;
  font-weight: 600;
  color: #fff;
  border-radius: 10px;
  // width: 60px;
  // height: max-content;
  text-align: center;
}
.staff-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  > div {
    background: #fff;
    padding: 20px 40px;
    width: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 26px;
    color: #636363;
    position: relative;
    // justify-content: center;
  }
  .del-icon {
    font-size: 36px;
    color: #000;
    position: absolute;
    right: 40px;
    top: 20px;
  }
}

.btn {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  margin: 80px auto 0;
  border-radius: 50px;
  background: #fabd17;
  font-size: 30px;
  color: #fff;
}
</style>
